<template>
    <div class="table-set">

        <el-dialog :modal="false" title="编辑" :visible.sync="dialogFormVisible" width="300px" style="margin-top:0">

            <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
                <el-form-item prop="tableName" label="标题" :rules="{
                    required: true, message: '标题不能为空', trigger: 'blur'
                }">
                    <el-input v-model="dynamicValidateForm.tableName" width="80%" size="mini"></el-input>
                </el-form-item>

                <el-form-item v-for="(fields, index) in dynamicValidateForm.fields" :label="'内容' + index" :key="fields.kk"
                    :prop="'fields.' + index + '.key'" :rules="{
                        required: true, message: '内容不能为空', trigger: 'blur'
                    }">
                    <el-input v-model="fields.key" size="mini"></el-input>
                    <el-input v-model="fields.type" size="mini"></el-input>
                    <el-button @click.prevent="removeDomain(fields)" type="danger" size="mini">删除</el-button>

                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('dynamicValidateForm')" size="mini">确定</el-button>
                    <el-button @click="addDomain" size="mini">新增</el-button>

                </el-form-item>
            </el-form>


        </el-dialog>

    </div>
</template>
  
<script>
// @ is an alias to /src


export default {
    name: 'TableSet',
    props: ['TableSetnode'],
    components: {

    },

    data() {
        return {
            dialogFormVisible: false,
            dynamicValidateForm: {
                tableName: "Users",
                fields: [
                    {
                        key: "id",
                        type: "string",
                    },
                    {
                        key: "name",
                        type: "string",
                    },
                    {
                        key: "age",
                        type: "integer",
                    },
                ],
            }
        };
    },
    mounted() {

    },
    methods: {

        setFormVisible(type) {
            this.dialogFormVisible = true
            this.dynamicValidateForm = type
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const valueToSend = this.dynamicValidateForm;
                    this.$emit('TableSet-event', valueToSend);
                    this.dialogFormVisible = false
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });


        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        removeDomain(item) {
            var index = this.dynamicValidateForm.fields.indexOf(item)
            if (index !== -1) {
                this.dynamicValidateForm.fields.splice(index, 1)
            }
        },
        addDomain() {
            // this.dialogFormVisible = true
            // console.log(this.NodeData);
            this.dynamicValidateForm.fields.push({
                key: '',
                type: '',
                kk: Date.now()
            });
        }
    }

}
</script>
<style scoped>
.el-select .el-input {
    width: 130px;
}

::v-deep .el-dialog {
    margin-right: 0;
}
</style>